<template>
  <div class="index-list">
    <div class="header">
      <router-link to="/home/search">
        <input type="text" class="searchInput" placeholder="搜索一下" />
      </router-link>
      <div class="tabs">
        <router-link class="tabslink" tag="div" to="/home/index/posts-list">推荐</router-link>
        <router-link class="tabslink" tag="div" to="/home/Index/theme">主题</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="less" socped>
.router-link-active {
  font-weight: 900;
  border-bottom: 4px solid rgb(0, 110, 255);
}

.header {
  width: 100%;
  height: 90px;
}
.tabs {
  .tabslink {
    font-size: 18px;
    display: inline-block;
    padding: 8px 40px;
  }
}
.searchInput {
  width: 88%;
  text-align: center;
  border-radius: 15px;
  height: 34px;
  margin-top: 10px;
  background-color: #eee;
  border: 1px solid #eee;
}
</style>